<template>
  <view class="contenter">
    <view class="head u-flex flex_bt" v-if="id">
      <view class="name">{{store.name}}</view>
<!--      <view>耳东陈</view>-->
    </view>
    <view class="main">
      <reserve-date
        @changeDay='changeDay'
        ref="child"
        @changeMonth='changeMonth'
        :price='price'
        :isNowDate='isNowDate'
        :disableBefore='disableBefore'
        :singleElection='singleElection'
        :date='date'
        :dateTime="timeList"
      />
      <view class="banci">
        <view class="title u-flex">
          <view class="top"></view>
          <view class="name">选择班次</view>
        </view>
        <view class="u-flex time">
          <view v-for="(data,index) in allList.timeset" :key="index" :class="{'active':data.id===tabIndex}" @click="tabChange(data.id)">{{data.name}} {{data.describe}}</view>
        </view>
      </view>
      <view class="user" v-if="!id">
        <view class="title u-flex">
          <view class="top"></view>
          <view class="name">选择服务技师</view>
        </view>
        <view class="u-flex u-flex-wrap jishi" v-if="tabIndex == 1">
          <view v-for="(data,index) in allList.technician" :class="{'active':listId.includes(data.id)}" :key="index" @click="changeTime(data)">{{data.name}}</view>
        </view>
        <view class="u-flex u-flex-wrap jishi" v-if="tabIndex == 2">
          <view v-for="(data,index) in allList.technician" :class="{'active':listIdTwo.includes(data.id)}" :key="index" @click="changeTime(data)">{{data.name}}</view>
        </view>
      </view>
      <view class="bt u-margin-top-40" @click="submit">确认排班</view>
    </view>

  </view>
</template>

<script>
import reserveDate from '@/components/reserve-date/reserve-date.vue'
export default {
name: "Scheduling",
  data(){
    return{
      listId:[],//技师
      listIdTwo:[],//通班技师
      allList:{},//数据集合
      timeId:'',//选中时间集合
      timeAn:[],
      tabIndex:1,
      id:'',//技师id
      timeList:[],//时间
      date: '',//今日时间
      mothDate:'',//这个月
      price: {
        type: true,
        data: []
      },
      form:{
        month: "",
        type: 1, //1是批量 2是单独
        roster: [
          {
            timeset: '',
            technician_id: "",
            date: ""
          },
          {
            timeset: '',
            technician_id: "",
            date: ""
          }
        ]
      },//提交数据
      store: {},
      isNowDate: true,
      disableBefore: false ,//是否禁掉选择
      singleElection: false
    }
  },
  mounted() {
    // let time = new Date()
    // var d = time.getDate();
    this.store = uni.getStorageSync('store')
    this.changeMonth(['', '', 31])
    // this.$refs.child.ChoiceDate(6, false)
  },
  components: {
    reserveDate
  },
  onShow(){

  },
  onLoad(option) {
    this.id = option.id
    this.form.type  = option.type
    if(!this.id){

      uni.setNavigationBarTitle({
        title:'批量排班'
      })
    }else {
      this.form.roster[0].technician_id = this.id.toString()
      this.form.roster[1].technician_id = this.id.toString()
    }
    this.form.roster[0].timeset = this.tabIndex // 初始化

  },
  created(){
    let time = new Date()
    var y = time.getFullYear();
    var month = time.getMonth() + 1;
    var d = time.getDate();
    this.date = `${y}-${month}-${d}`

  },

  methods:{

  //请求之前排班的数据
    rosterList(){
      let form = {
        id:this.id,//技师id
        date:this.mothDate,//技师id
      }
      this.$api.rosterList(form).then(res => {
        this.allList = res.data
        this.form.roster[1].date = this.allList.times[1].date.toString()//当通班有数据的时候默认
        if(this.form.roster[1].date){
          this.form.roster[1].timeset = 2
        }
        this.jishi()
      })
    },
    //选择技师
    changeTime(data){
      //早班
      if(this.tabIndex == 1){
        if(this.listId.length  === 0){
          this.listId.push(data.id)
        }else {
          if( !this.listId.includes(data.id)){
            this.listId.push(data.id)
            this.listId = [...new Set(this.listId )]
          }else {
            let index = this.listId.findIndex(item => item === data.id)
            this.listId = [...this.listId]
            this.listId.splice(index,1)
          }
        }
      }else {
        if(this.listIdTwo.length  === 0){
          this.listIdTwo.push(data.id)
        }else {
          if( !this.listIdTwo.includes(data.id)){
            this.listIdTwo.push(data.id)
            this.listIdTwo = [...new Set(this.listIdTwo )]
          }else {
            let index = this.listIdTwo.findIndex(item => item === data.id)
            this.listIdTwo = [...this.listIdTwo]
            this.listIdTwo.splice(index,1)
          }
        }
        console.log(this.listIdTwo)
      }

    },

    tabChange(index){
      this.tabIndex = index
      if(index == 1){
        this.form.roster[0].timeset = index
      }else {
        this.form.roster[1].timeset = index
      }
      this.jishi()
    },
    //初始化技师 时间
    jishi(){
      this.allList.times.forEach(res=>{
        //早班
        if(this.tabIndex == res.timeset && this.tabIndex == 1){
          if(this.form.type == 1){
            this.listId = res.technician_id
          }
          // 选中时间的数组
          this.timeList = res.date.map(data=>{
            return {
              date:data
            }
          })
        }
        if(this.tabIndex == res.timeset && this.tabIndex == 2){
          if(this.form.type == 1){
            this.listIdTwo = res.technician_id
          }
          // 选中时间的数组
          this.timeList = res.date.map(data=>{
            return {
              date:data
            }
          })
        }

      })

    },
    // 日期改变
    changeDay(date) {
      let time = date.map(res=>{
       return  this.timeFliter(res.date)
      })
      // //早班
      if(this.tabIndex == 1){
        this.form.roster[0].date = time.toString()
      }else {
        //通班
        this.form.roster[1].date = time.toString()
      }
    },
    //格式话时间 添加0
    timeFliter (date) {
      let time = date.split('-')
      let yy = time[0]; //年
      let mm = time[1]; //月
      let dd =  time[2]; //日
      if (mm < 10&& !mm.toString().includes('0')) {
        mm = '0' + mm
      }
      if (dd < 10&& !dd.toString().includes('0') ) {
        dd = '0' + dd
      }
      return yy+'-'+mm+'-'+dd
    },
    // 月改变
    changeMonth(data) {
      if(data[1] == ''){
        let time = new Date()
        var y = time.getFullYear();
        var month = time.getMonth() + 1;
        if (month < 10) {
          month = '0' + month
        }

        this.mothDate = `${y}-${month}`
      }else {
        if (data[1] < 10) {
          this.mothDate = `${data[0]}-0${data[1]}` //月份
        }else {
          this.mothDate = `${data[0]}-${data[1]}` //月份
        }
      }
      this.rosterList()

      if (!this.price.type) return false
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      let price = []
      setTimeout(() => {
        this.price.data = []
        for (let i = 0; i < data[2]; i++) {
          price.push(parseInt(Math.random() * 1000))
        }
        this.price.data = price
        uni.hideLoading()
      }, 500)
    },
  //选择日期
    confirm(e) {
      console.log(e);
    },
    //提交数据
    submit(){
      this.form.month = this.mothDate
      //早班
      if(this.form.type == 1){
        if(this.tabIndex == 1){
          this.form.roster[0].technician_id = this.listId.toString()
        }else {
          this.form.roster[1].technician_id = this.listIdTwo.toString()
        }
      }

      this.$api.rosterSaves(this.form).then(res => {
        this.$u.toast('保存成功')
        this.rosterList()
      })
    },
  }
}
</script>

<style scoped lang="scss">
.contenter{
  .head{
    background: url("/static/user/my-user.png") no-repeat;
    background-size: 100%;
    height: 100rpx;
    padding: 0 32rpx;
    font-size: 28rpx;
    color: white;
    background-position: 0px 8rpx;
  }
  .main{
    margin: 0 32rpx;
    .title{

      .top{
        width: 10rpx;
        height: 40rpx;
        background: #45806E;
        border-radius: 30rpx;
        margin-right: 10rpx;
      }
      .name{
        font-size: 32rpx;
        color: #000;
        font-weight: bold;
      }
    }
    .banci{
      margin-top: 30rpx;
      .time{
        width: 100%;
        height: 160rpx;
        padding: 0 20rpx;
        background: white;
        margin-top: 16rpx;
        .active{
          background: #45806E;
          border: 2rpx solid #45806E;
          color: white;
        }

        view{
          width: 306rpx;
          height: 90rpx;
          background: #F5F5F5;
          border: 2rpx solid #CCCCCC;
          border-radius: 12rpx;
          color: #4B4B4B;
          line-height: 90rpx;
          text-align: center;
          &:first-child{
            margin-right: 40rpx;
          }
        }
      }

    }
    .user{
      margin-top: 30rpx;
    }
    .jishi{
      margin-top: 20rpx;
      background: white;
      padding: 20rpx;
      padding-bottom: 0 ;
      view{
        //width: 148rpx;
        padding: 0 30rpx;
        height: 74rpx;
        background: #F5F5F5;
        border-radius: 8rpx;
        color: #4A4A4A;
        font-size: 28rpx;
        margin-right: 18rpx;
        line-height: 74rpx;
        text-align: center;
        margin-bottom: 20rpx;
        &:nth-child(4n+0){
          margin-right: 0;
        }
      }
      .active{
        background: #FFFFFF;
        border: 2rpx solid #45806E;
        box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.08);
      }
    }
  }
}

</style>